<!doctype html>
<html>
<head>
<title>Opal M10</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
/*Layout*/
body{
	margin:0;
	padding:0;
	width:100%;
	background-color:#FFFFFF;
	font-size:13px;
	font-family:sans-serif;
}
p{
	margin:0;
}
a{
	color:;
}

#head{
}
#head h1{
	font-size:18px;
	margin:0;
	padding:6px;
	font-weight:normal;
	text-shadow:1px 1px 0 #DAD8E2;
}
#nav-container{
}
#nav-bar{
	height:40px;
	padding:6px;
	border-top:1px #DAD8E2 solid;
	border-bottom:1px #DAD8E2 solid;
}
#nav-tb{
	width:100%;
}
#nav-tb-l{
	width:60px;
	height:35px;
}
#nav-tb-r{
	width:60px;
	height:35px;
}
#nav-tb-c{
	text-align:center;
}
#nav-title{
	font-size:14px;
	font-weight:bold;
	text-shadow:1px 1px 0 #DAD8E2;
	text-align:center;
}

/*Styles*/
.nav-btn{
	font-size:14px;
	font-weight:bold;
	text-shadow:1px 1px 0 #DAD8E2;
	text-align:center;
	padding:6px;
	border:1px #DAD8E2 solid;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	-webkit-box-shadow:0 1px 0 #EFEEF2;
}
.main-picrowview{
	padding:5px;
	border-bottom:1px #DAD8E2 solid;
}

.pic-con{
	float:left;
	margin:0
}
.pic-con img{
	display:block;
}

.clear{
	clear:both;
}
</style>
</head>
<body>
	<div id="head">
		<h1>Opal M10</h1>
	</div>
	<div id="nav-container">
		<div id="nav-bar">
			<table id="nav-tb">
				<tr>
					<td id="nav-tb-l">
						<div id="navbtn-back" class="nav-btn"><span>返回</span></div>
					</td>
					<td id="nav-tb-c">
						<div id="nav-title">板块标题</div>
					</td>
					<td id="nav-tb-r">
						<div id="navbtn-more" class="nav-btn"><span>更多</span></div>
					</td>
				</tr>
			</table>
		</div>
	</div>
	<div id="main-container">
		<div id="main-viewlist">
			<div class="main-picrowview">
				<a href="#">
					<div class="pic-con"><img src="http://farm3.static.flickr.com/2614/3790486306_afd8f83da8_s.jpg"/></div>
					<div class="pic-des">
						<p class="pic-title"><strong>图片标题</strong></p>
					</div>
				</a>
				<div class="clear"></div>
			</div>
			<div class="main-picrowview expanded">
				<a href="#">
					<div class="pic-con"><img src="http://farm3.static.flickr.com/2481/3789671499_c55e2ab7cb_m.jpg"/></div>
					<div class="pic-des">
						<p class="pic-title"><strong>图片标题</strong></p>
						<p class="pic-time">20100101</p>
					</div>
				</a>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<div id="foot">
		More..
	</div>
</body>
</html>